<template>
  <u-navbar title="首页" placeholder safe-area-inset-top :auto-back="false"/>
  <view class="base-content bg-white">
    <u-search class="slot-wrap ml-10px" @focus="handleSearchFocus" :show-action="false"/>
  </view>
  <!--  <u-popup v-model="authPopVisible" mode="bottom">-->
  <!--    <u-button @click="handleConfirmAuth">确认</u-button>-->
  <!--  </u-popup>-->
  <view class="p-10px bg-white m-10px grid grid-cols-3 gap-30px">
    <view class="text-center p-5px rounded-4px">
      <view>
        <u-icon class="inline-block" name="photo" color="#2979ff" size="40"/>
      </view>
      <text class="mt-8px">热门</text>
    </view>
    <view class="text-center p-5px rounded-4px">
      <view>
        <u-icon class="inline-block" name="photo" color="#2979ff" size="40"/>
      </view>
      <text class="mt-8px">最新</text>
    </view>
    <view class="text-center p-5px rounded-4px">
      <view>
        <u-icon class="inline-block" name="photo" color="#2979ff" size="40"/>
      </view>
      <text class="mt-8px">捡漏</text>
    </view>
  </view>
  <view class="bg-white py-1px reactive flex-1 overflow-hidden">
    <template v-if="bookList.length > 0">
      <template v-for="item in compBookList">
        <view class="flex card m-10px">
          <u-image class="mr-10px" :src="item.cover" width="80px" height="80px"/>
          <view class="flex-1 flex flex-col justify-between">
            <text @click="handlerBookClick(item)" class="mr-8px font-bold text-16px block">{{item.name}}</text>
            <view class="">
              <template v-for="(it,idx) in item.typeList" :key="idx">
                <text class="px-4px py-2px bg-zinc-300 rounded-2px text-10px mr-8px">{{ it.name }}</text>
              </template>
            </view>
            <view class="text-14px">
              <text class="inline-block mr-8px">二手价：<text class="text-hex-ff0000">{{ item.price }}￥</text></text>
              <text v-if="item.oldPrice" class="inline-block mr-8px line-through text-hex-666666 text-12px align-bottom">新书价：{{ item.oldPrice }}￥</text>
            </view>
            <view class="flex justify-between items-end">
              <text class="text-10px text-slate-400">发布于：{{dateFormat(item.createTime, 'datetime')}}</text>
              <view class="text-12px">
                <u-icon v-if="item.isCollect" color="#999999" class="inline-block mr-6px align-middle text-hex-999999" name="star-fill" @click.prevent.stop="handlerUnCollect(item)"/>
                <u-icon v-else color="#999999" class="inline-block mr-6px align-middle text-hex-999999" name="star" @click.prevent.stop="handlerCollect(item)"/>
                <u-icon color="#999999" class="inline-block mr-6px align-middle text-hex-999999" name="eye"/>
                <text class="inline-block align-middle text-hex-999999">{{item.viewCount}}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </template>
    <template v-else>
      <no-data class="min-h-100px"/>
    </template>
  </view>
  <u-toast ref="uToast" />
</template>

<script setup lang="ts">
import type {Book, BookListParam} from "@/api/book";
import {reactive, ref,computed} from "vue";
import userStore from '@/store/user'
import NoData from "@/components/NoData.vue";
import {onReachBottom, onShow} from '@dcloudio/uni-app'
import UToast from "@/uni_modules/uview-plus/components/u-toast/u-toast.vue";
import UIcon from "@/uni_modules/uview-plus/components/u-icon/u-icon.vue";
import UImage from "@/uni_modules/uview-plus/components/u-image/u-image.vue";
import USearch from "@/uni_modules/uview-plus/components/u-search/u-search.vue";
import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import { getBookList } from "@/api/book";
import UList from "@/uni_modules/uview-plus/components/u-list/u-list.vue";
import {dateFormat} from "@/utils";
// 搜索框聚焦事件，这个时候需要跳转搜索页面
const handleSearchFocus = () => {
  uni.navigateTo({url: '/pages/search/index'})
}
const user = userStore()
const uToast = ref<unknown>(null)
// 书籍列表
const bookList = ref<Book[]>([])
const bookParams = reactive({
  pageSize: 20,
  pageNum: 1,
  total: 0
})
const fnGetBookList = async (isPush?: boolean) => {
  const params: BookListParam = {
    pageNum: bookParams.pageNum,
    pageSize: bookParams.pageSize,
    linkName: ''
  }
  const { data } = await getBookList(params)
  if(isPush){
    bookParams.total = data.total
    bookList.value.push(...data.records)
  }else{
    bookList.value = data.records
  }
}
// 初始化书籍列表
fnGetBookList()
// const user = userStore()
// const authPopVisible = ref(true)
// const handleConfirmAuth = () => {
//   // 获取微信用户详情信息
//   user.weixinInfo()
// }
// 书籍列表滚动到底部时触发的事件
onReachBottom(() => {
  if(bookParams.pageNum * bookParams.pageSize <= bookParams.total){
    bookParams.pageNum ++
    fnGetBookList(true)
  }
})
//列表子项点击事件
const handlerBookClick = (item:Book) => {
  uni.navigateTo({
    url: `/pages/bookDetail/index?bid=${item.bid}`,
  })
}
// 页面滚动到底部
onReachBottom(() => {
})
const handlerUnCollect = async (item: Book) => {
  await user.unCollectBook(item.bid)
  await user.storeCollectList()
}
const handlerCollect = async (item: Book) => {
  await user.collectBook(item.bid)
  await user.storeCollectList()
}
const compBookList = computed(() => {
  const list = bookList.value.map(item => {
    return {
      ...item,
      isCollect: !!user.collectList?.find(it => it.bid === item.bid)
    }
  })
  console.log('comp', list)
  return list
})
</script>

<style>
</style>
